<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDoList</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        #taskInput {
            width: 200px;
            padding: 5px;
            margin-right: 10px;
        }
        #addTaskBtn {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
        .completed {
            text-decoration: line-through;
            color: #ccc;
        }
        .deleteBtn {
            background-color: #f44336;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>ToDoList</h1>
    <input type="text" id="taskInput" placeholder="输入任务">
    <button id="addTaskBtn">添加任务</button>
    <table id="taskTable">
        <thead>
            <tr>
                <th>任务内容</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script src="todolist.js"></script>
</body>
<script>
    $(document).ready(function () {
    // 添加任务
    $("#addTaskBtn").click(function () {
        var task = $("#taskInput").val().trim();
        if (task) {
            var row = $("<tr></tr>");
            row.append($("<td></td>").text(task));
            var td = $("<td></td>");
            td.append($("<button class='completeBtn'>完成</button>"));
            td.append($("<button class='deleteBtn'>删除</button>"));
            row.append(td);
            $("#taskTable tbody").append(row);
            $("#taskInput").val("");
        } else {
            alert("请输入任务内容");
        }
    });

    // 完成任务
    $(document).on("click", ".completeBtn", function () {
        $(this).parent().toggleClass("completed");
    });

    // 删除任务
    $(document).on("click", ".deleteBtn", function () {
        $(this).parent().parent().remove();
    });
});

</script>
</html>
